<template>
  <ContentBlock v-bind="$attrs">
    <div class="card-left-container">
      <slot name="left"></slot>
    </div>
    <div class="card-right-container">
      <div class="right-main-container">
        <span class="right-main-num">{{ data.total }}</span>
        <div class="right-main-desc-container">
          <img
            class="right-main-desc-img"
            src="/static/img/park/general/sign-left.webp"
          />
          <span class="right-main-desc">{{ data.totalDesc }}</span>
          <img
            class="right-main-desc-img"
            src="/static/img/park/general/sign-right.webp"
          />
        </div>
      </div>

      <div class="right-desc-container">
        <div class="right-desc-item">
          <span>{{ data.subFistTotalDesc }}</span>
          <span class="right-desc-num-first">{{ data.subFistTotal }}</span>
        </div>
        <div class="right-desc-item">
          <span>{{ data.subLastTotalDesc }}</span>
          <span class="right-desc-num-last">{{ data.subLastTotal }}</span>
        </div>
      </div>
    </div>
  </ContentBlock>
</template>

<script>
import ContentBlock from "@/components/ContentBlock/ContentBlock.vue";

export default {
  name: "InfoCard",
  components: { ContentBlock },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },

  methods: {}
};
</script>

<style lang="less" scoped>
.info-card-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: 0.375rem;
  background-image: linear-gradient(
    180deg,
    rgba(65, 146, 217, 1),
    rgba(65, 146, 217, 0.3),
    rgba(65, 146, 217, 0.3),
    rgba(65, 146, 217, 1)
  );

  &::after {
    content: "";
    position: absolute;
    top: 0.0625rem;
    left: 0.0625rem;
    width: 100% - 0.625rem;
    height: 100% - 1.875rem;
    box-shadow: inset 0px 5px 20px 1px rgba(43, 46, 52, 0.15);
    border-radius: 0.375rem;
    background: linear-gradient(
      360deg,
      rgba(47, 61, 82, 0.85) 0%,
      rgba(8, 20, 37, 0.65) 100%
    );
    mix-blend-mode: multiply;
  }

  // 卡片左侧区域样式
  .card-left-container {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  // 卡片右侧区域样式
  .card-right-container {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.625rem;

    .right-main-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 1.25rem;
      margin-left: 0.625rem;
      font-size: 1rem;
      font-weight: 500;
      color: #fff;
      line-height: 1.1875rem;

      .right-main-num {
        margin-bottom: 0.625rem;
        font-size: 1.5rem;
        font-family: Chakra Petch Regular;
        color: #b0e0ff;
        line-height: 1.5rem;
        letter-spacing: 0.0625rem;
      }

      .right-main-desc-container {
        position: relative;
        display: flex;
        align-items: flex-start;

        .right-main-desc-img {
          position: absolute;
          width: 1.5625rem;
          height: 1.5625rem;

          &:first-child {
            bottom: -0.625rem;
            left: -1.5625rem;
          }

          &:last-child {
            right: -1.5625rem;
            bottom: -0.625rem;
          }
        }

        .right-main-desc {
          flex-shrink: 0;
        }
      }
    }

    .right-desc-container {
      display: flex;
      flex-direction: column;
      font-size: 0.875rem;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 500;
      color: #fff;
      line-height: 1.625rem;

      .right-desc-item {
        margin-bottom: 0.625rem;

        &:last-child {
          margin-bottom: 0;
        }

        .right-desc-num-first {
          margin-left: 1rem;
          font-size: 1.125rem;
          font-weight: 500;
          font-family: Chakra Petch Regular;
          color: #b0e0ff;
          line-height: 1.3125rem;
        }

        .right-desc-num-last {
          margin-left: 1rem;
          font-size: 1.125rem;
          font-weight: 500;
          font-family: Chakra Petch Regular;
          color: #ffb89c;
          line-height: 1.3125rem;
        }
      }
    }
  }
}
</style>
